<template>
  <div class="whiteRootview flex-container">
    <!-- 标题栏 -->
    <div class="titleCont">
        <van-nav-bar v-show="active!='mine'" id="nav" class="nav-bar flex-item" :border="false">
          <font class="title" slot="left">{{title}}</font>
        </van-nav-bar>
        <div class="stateCont" @click="stateShow">
          <i class="iconfont icon-shalou"></i>
          <div>{{stateTitle}}</div>
        </div>

        <!-- 入库状态 -->
        <div class="states" v-show="stashow">
          <ul>
            <li v-for="(item,index) in stateArray" :key="index"
                class="statedesc"
                :class="stateIndex == index ? 'stateActive':''" @click="switchState(index,item)">
                {{item}}
            </li>
          </ul>
        </div>
    </div>

    <!-- <div class="zhezhao" :style="{height: scrollerHeight}"></div> -->

    <!-- 内容 -->
    <div class="content flex-item">
      <div class="divider"></div>
      <!-- 搜索框 动态绑定keywords-->
      <van-search
        v-show="active!='mine'"
        :placeholder="searchPlaceholder"
        v-model="keywords"
        @search="onSearch"
        @cancel="onCancel"
        style="margin-bottom: 10px;"
      />
      <!-- 出库 -->
      <!-- <OutStorage
        :keywords="keywords"
        :state="outStockSelectedState"
        v-show="active=='outOfStock'"
      />-->

      <!-- 盘库 -->
      <!-- <Inventory v-show="active=='inventory'" :keywords="keywords" :state="inventorySelectedState"></Inventory> -->

      <!-- 我的 -->
      <!-- <Mine v-show="active=='mine'"></Mine> -->

      <!-- 动态组件 动态传参 是不是很牛逼！！！ -->
      <!-- <component :is="active" :keywords="inputedkeywords" :state="selectedState"></component> -->
      <!-- 这个更牛逼 -->
      <component :is="active" :keywords="keywords" :state="state"></component>
      <!-- 还可以使用嵌套路由实现 是不是很吊,但是不知道怎么动态传值，只能传一次参数，无法监听搜索和状态选择 -->
      <!-- <router-view></router-view> -->
    </div>

    <!-- 底部Tab按钮 -->
    <van-tabbar
      class="flex-item"
      v-model="active"
      @change="tabChange"
      active-color="#477CEC"
      inactive-color="#999999">
      <van-tabbar-item name="WareHousing">
        <span class="tabText">入库</span>
        <img
          class="tabImg"
          slot="icon"
          slot-scope="props"
          :src="props.active ? caretIcon.active : caretIcon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item name="materialRequisition">
        <span class="tabText">出库</span>
        <img
          class="tabImg"
          slot="icon"
          slot-scope="props"
          :src="props.active ? outStockIcon.active : outStockIcon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item name="inventory">
        <span class="tabText">盘库</span>
        <img
          class="tabImg"
          slot="icon"
          slot-scope="props"
          :src="props.active ? inventoryIcon.active : inventoryIcon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item name="mine">
        <span class="tabText">我的</span>
        <img
          class="tabImg"
          slot="icon"
          slot-scope="props"
          :src="props.active ? mineIcon.active : mineIcon.normal"/>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
// import outOfStock from "@/components/OutStorage";
import WareHousing from "@/components/wareHousing";
import materialRequisition from "@/components/MaterialRequisition";
import inventory from "@/components/Inventory";
import mine from "@/components/Mine";
import caretDown from "@/assets/caret-down.png";
import caretUp from "@/assets/caret-up.png";

import mineActive from "@/assets/mine-active.png";
import mineNormal from "@/assets/mine-normal.png";
import inventoryActive from "@/assets/inventory-active.png";
import inventoryNormal from "@/assets/inventory-normal.png";
import outStockActive from "@/assets/outStock-active.png";
import outStockNormal from "@/assets/outStock-normal.png";
import select from "@/assets/select.png";
import consts from "@/utils/consts";




export default {
  components: {
    materialRequisition,
    inventory,
    mine,
    WareHousing
  },
  data() {
    return {
      stateTitle:'全部',
      stateArray:['全部','未入库','入库中','已入库'],
      stateIndex:0,
      stashow:false,
      show: false,
      // dropDownSelectedItem: dropDownSelectedItem,
      // dropDownItem: dropDownItem,
      title: "入库",
      active: "WareHousing",
      // keywords: "",
      // state: 0,
      searchPlaceholder: "",
      caretIcon:{
        active: caretDown,
        normal: caretUp
      },
      mineIcon: {
        active: mineActive,
        normal: mineNormal
      },
      outStockIcon: {
        active: outStockActive,
        normal: outStockNormal
      },
      inventoryIcon: {
        active: inventoryActive,
        normal: inventoryNormal
      },
      selectIcon: select,

      // outStockKeywords: "",
      // inventoryKeywords: "",
      // outStockSelectedState: 0,
      // inventorySelectedState: 0,
      requisitionStateList: [
        {
          value: consts.allState,
          name: "全部"
        },
        { value: 1, name: "待处理" },
        // { value: 2, name: "待审批" },
        { value: 3, name: "已完成" }
      ],
      inventoryStateList: [
        {
          value: consts.allState,
          name: "全部"
        },
        { value: 1, name: "未提交" },
        { value: 2, name: "待审核" },
        { value: 3, name: "已完成" },
        { value: 4, name: "作废" }
      ]
    };
  },
  computed: {
    scrollerHeight: function(){
      return (document.body.clientHeight - 136) + 'px';
    },
    //动态绑定状态下拉列表
      stateList: function() {
        if (this.active == "materialRequisition") {
          return this.requisitionStateList;
        } else if (this.active == "inventory") {
          return this.inventoryStateList;
        } else {
          return [];
        }
      },
    //动态绑定组件关键字
    keywords: {
      get() {
        if (this.active == "materialRequisition") {
          // return this.outStockKeywords;
          return this.$store.getters.requisitionKeywords;
        } else if (this.active == "inventory") {
          // return this.inventoryKeywords;
          return this.$store.getters.inventoryKeywords;
        }
      },
      set(val) {
        if (this.active == "materialRequisition") {
          // this.outStockKeywords = val;
          this.$store.commit("setRequisitionKeywords", val);
        } else if (this.active == "inventory") {
          // this.inventoryKeywords = val;
          this.$store.commit("setInventoryKeywords", val);
        }
      }
    },
    //动态绑定组件状态
    state: {
      get() {
        if (this.active == "materialRequisition") {
          // return this.outStockSelectedState;
          return this.$store.getters.requisitionState;
        } else if (this.active == "inventory") {
          // return this.inventorySelectedState;
          return this.$store.getters.inventoryState;
        }
      },
      set(val) {
        if (this.active == "inventory") {
          this.$store.commit("setInventoryState", val);
        } else if (materialRequisition) {
          this.$store.commit("setRequisitionState", val);
        }
      }
    },
    stateStr() {
      if (this.active == "materialRequisition") {
        for (let i = 0; i < this.requisitionStateList.length; i++) {
          if (this.requisitionStateList[i].value == this.state) {
            return this.requisitionStateList[i].name;
          }
        }
      } else if (this.active == "inventory") {
        for (let i = 0; i < this.inventoryStateList.length; i++) {
          if (this.inventoryStateList[i].value == this.state) {
            return this.inventoryStateList[i].name;
          }
        }
      }
    }
  },
  methods: {
    switchState(index,item){
      this.stateIndex = index;
      this.stateTitle = item;
      this.stashow = false;
    },
    stateShow(){
      this.stashow = !this.stashow;
    },
  
    tabChange() {
      console.log("tab:" + this.active);
      if (this.active == "materialRequisition") {
        this.title = "出库";
        this.searchPlaceholder = "请输入申请人检索";
      } else if (this.active == "inventory") {
        this.title = "盘库";
        this.searchPlaceholder = "请输入计划名称检索";
      } else if (this.active == "mine") {
        this.title = "我的";
      } else if (this.active == "WareHousing") {
        this.title = "入库";
        this.searchPlaceholder = "请输入入库名称";
      }
    },

    onSearch() {
      console.log("onSearch");
      if (this.active == "materialRequisition") {
        // this.outStockKeywords = this.keywords;
        this.$store.commit("setRequisitionKeywords", this.keywords);
      } else if (this.active == "inventory") {
        // this.inventoryKeywords = this.keywords;
        this.$store.commit("setInventoryKeywords", this.keywords);
      }
    },
    onCancel() {
      console.log("onCancel");
      if (this.active == "materialRequisition") {
        // this.outStockKeywords = null;
        this.$store.commit("setRequisitionKeywords", null);
      } else if (this.active == "inventory") {
        // this.inventoryKeywords = null;
        this.$store.commit("setInventoryKeywords", null);
      }
    }
  },
  created() {
    this.active = this.$route.query.active;
    if (!this.active) {
      this.active = "WareHousing";
    }
    this.tabChange();
  }
};
</script>

<style scoped>
.titleCont{
  height: 68px;
	position: relative;
	display: flex;
	background-color: #fff;
	align-items: center;
	justify-content: space-between;
}
.stateCont{
  color: rgba(71, 124, 236, 1);
  display: flex;
  align-items: center;
	margin-right: 15px;
}
.icon-shalou{
	font-size: 30px;
}
/* @import "../../styles/common.scss"; */
/* .drop-down-enter,
.drop-down-leave-to {
  transition: translateY(00px);
  opacity: 1;
}
.drop-down-enter-active,
.drop-down-leave-active {
  transform: translateY(-70px);
  opacity: 0;
} */

.drop-down-enter-active,
.drop-down-leave-active {
  transition: all 0.5s ease;
}
.drop-down-enter,
.drop-down-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.stateBtn {
  width: 92px;
  height: 40px;
  background: rgba(222, 233, 255, 1);
  border-radius: 4px;
}
.dropDownPan {
  width: 253px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.24);
  border-radius: 8px;
}
.van-popup {
  width: 253px;
  height: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.24);
  border-radius: 8px;
  /* float: right;
  margin-top: 70px; */
  position: absolute;
  right: 0;
  top: 70px;
}
.dropDownItem {
  width: 253px;
  height: 74px;
  background: white;
  border-radius: 8px 8px 0px 0px;
  padding: 0;
  margin: 0;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 37px;
  letter-spacing: 1px;
}
.dropDownSelectedItem {
  width: 253px;
  height: 74px;
  background: rgba(237, 243, 255, 1);
  border-radius: 8px 8px 0px 0px;
  padding: 0;
  margin: 0;
  text-align: center;
  border-bottom: 2px solid #e0e0e0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 37px;
  letter-spacing: 1px;
}
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* .flex-item:nth-child(1),
.flex-item:nth-child(3) {
  flex-shrink: 0;
  flex-grow: 0;
}
.flex-item:nth-child(2) {
  flex-shrink: 1;
  flex-grow: auto;
  overflow: auto;
} */
.flex-item:nth-child(1),
.flex-item:nth-child(4) {
  flex-shrink: 0;
  flex-grow: 0;
}
.flex-item:nth-child(2),
.flex-item:nth-child(3) {
  flex-shrink: 1;
  flex-grow: auto;
  overflow: auto;
}
.whiteRootview {
  background-color: #f4f5f6;
  height: 100vh;
}
.nav-bar {
  background-color: white;
  background-size: cover;
  flex-grow: 0;
  flex-shrink: 0;

  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.title {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
}
.van-nav-bar__left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-nav-bar__right {
  position: relative;
}
.content {
  flex: auto;
  overflow: auto;
  margin-bottom: 50px;
}

.stateSelect {
  width: 92px;
  height: 40px;
  background: rgba(222, 233, 255, 1);
  border-radius: 4px;
  border-width: 0;
  /* font-size: 20px; */
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabText {
  font-size: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 1px;
}
.tabImg {
  width: 28px;
  height: 28px;
}
/* 状态 */
.states{
  z-index: 100;
  background-color: #0000FF;
	width: 100px;
	background-color: #fff;
	position: absolute;
	top: 50px;
	border: 1px solid #d8cfd7;
	border-radius: 5px;
	right: 30px;
}
.statedesc{
  text-align: left;
  padding: 5px 10px;
	line-height: 30px;
	border-bottom: 1px solid #d8cfd7;
}
.stateActive{
  background-color:#EDF3FF;
}
.zhezhao{
  background-color: #000;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  position: absolute;
  z-index: 99;
  top: 68px;
}
</style>
